<template>
  <div class="singer-song">
    <van-button type="default" size="small" @click="back">返回</van-button>
    <h2>歌手的全部歌曲</h2>
    <div class="s-song-list">
      <div class="s-song-list-item" v-for="(item, index) in singerSongData" :key="index">
        <ListItem :singer-data="item" :is-play-icon="true"></ListItem>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import ListItem from '../components/ListItem.vue'
export default {
  name: 'SingerSong',

  components: {
      ListItem
    },

    data() {
      return {
        singerSongData: []
      };
    },

  created() {
    //获取歌手的id
    let singerId = this.$route.params.id;
      

    this.getSongsBySingerId(singerId);
  },

  computed: {
    ...mapState({
      currentAudioInfo: 'currentAudioInfo'
    })
  },

  methods: {

    //返回上一级
    back() {
      this.$router.back();
    },

  
    //根据歌手的id获取全部歌曲
    getSongsBySingerId(singerId) {
      this.axios({
        method: 'get',
        url: 'https://apis.netstart.cn/music/artist/songs',
        params: {
          id: singerId,
          limit: 10,
          offset: 0
        }
      }).then(res => {
          

        let data = res.data.songs.map(item => {

          //可能存在多个歌手
          let singers = [];
          item.ar.forEach(singer => {
            singers.push(singer.name)
          })

          return {
            //歌曲的id
            id: item.id, 
            name: item.name, 
            picUrl: item.al.picUrl, 
            singerName: singers.join('/')
          }
        })

        this.singerSongData.push(...data);

      }).catch(err => {
          
      })
    }
    
  }
}
</script>

<style lang="less" scoped>
.singer-song {}
</style>